<template>
	<div class="featuredZone"
		:style="{padding:tplItemData.modulePadding + 'px ' + tplItemData.levelPadding + 'px'}" >
    <div class="tabs-wrap">
      <div class="hr" :style="{'background': tplItemData.bgColor}"></div>
      <div class="title" :style="{'color': tplItemData.color}">{{tplItemData.title}}</div>
    </div>
    <div class="featuredZone-whole">
      <template  v-for="(item, index) in tplItemData.dataset">
        <div :class="item.img.length > 1? 'zone one-zone' : 'zone two-zone'" :key="index" @click="openLink(item.link)">
          <div class="zone-title" :style="{'color': item.minColor}">{{item.heading}}</div>
          <div class="zone-subtitle">{{item.subtitle}}</div>
          <div class="zone-img">
            <div v-for="(pic, j) in item.img" :key="j">
              <img :src="pic"  />
            </div>
          </div>
        </div>
      </template>

    </div>

	</div>
</template>
<script>
import Vue from 'vue'
import { openPage } from '@/utils/utils'

export default Vue.extend({
  name: 'index',
  props: {
    tplItemData: {
      type: Object // 传入参数的类型
    }
  },
    methods: {
    // TODO 小程序跳转
    openLink(link) {
        openPage(link)
    }
  }
})
</script>
<style lang="scss">
.featuredZone {
  .tabs-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: #333;
    margin-bottom: 24px;
    .hr {
        background: #00c257;
        width: 8px;
        margin-right: 16px;
        height: 44px;
        border-radius: 16px;
    }
    .title {
        font-size: 32px;
        font-weight: 500;
        margin-right: 24px
    }
  }
  .featuredZone-whole {
    display: flex;
    flex-wrap: wrap;
    margin-top: 24px;
    border-radius: 8px;overflow: hidden;
    background-color: #fff;
    outline: 0.5px solid #D4D4D4;
    .zone {
      padding: 24px;
        &:first-child {
          outline: 0.5px solid #D4D4D4;
        }
        &:last-child{
          border-top: 0.5px solid #D4D4D4;
          border-left: 0.5px solid #D4D4D4;
        }
        &:nth-last-child(2) {
          border-top: 0.5px solid #D4D4D4;
          border-left: 0.5px solid #D4D4D4;
        }
      &.one-zone {
        width: 50%
      }
      &.two-zone {
        flex: 1;
        width: 18%
      }
      .zone-title {
        font-weight: 500;
        font-size: 28px;
        margin-bottom: 12px
      }
      .zone-subtitle {
        color: #999;
        font-size: 24px;
      }
      .zone-img {
        display: flex;
        align-items:center;
        justify-content: space-between;
        margin-top: 16px;
        img {
          width: 136px;
          height: 136px;
        }
      }
    }
  }
}
</style>